<template>
  <div id="commonDrawer">
    <el-drawer
      title=""
      :visible.sync="dialogData.isShow"
      :with-header="false"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true"
      size="700px"
    >
      <div class="title">
        <span>评论列表：</span>
        <el-button type="text" @click="changeView">更多>></el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        max-height="550"
        ref="table"
      >
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="{ $index }">
            {{
              $index | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="昵称"
          prop="user.nickName"
          width="130"
        ></el-table-column>
        <el-table-column label="评论内容" width="170">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" placement="top">
              <div
                style="max-width: 400px;"
                v-html="filterContent(row)"
                slot="content"
              ></div>
              <div class="text-overflow" v-html="filterContent(row)"></div>
            </el-tooltip>
            <!-- <span v-html="filterContent(row)"></span>-->
          </template>
        </el-table-column>
        <el-table-column label="视图预览" prop="images" width="80">
          <template slot-scope="{ row }">
            <span v-if="row.images && row.images.length > 0">
              <listImgShow :imgInfo="row.images"></listImgShow>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="评论时间"
          prop="createdDate"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.isRecommend"
              type="text"
              @click="cancelRecommend(row.id)"
            >
              取消置顶
            </el-button>
            <el-button v-else type="text" @click="toRecommend(row.id)">
              置顶
            </el-button>
            <el-button
              type="text"
              @click="showAddPraise(row.id, row.likeCount)"
            >
              加赞
            </el-button>
            <el-button type="text" @click="addComment(row.id)">
              添加回复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </el-drawer>
    <!--加赞弹窗-->
    <dialogAddPraise
      v-if="addPraiseData.isShow"
      :addPraiseData="addPraiseData"
      @refresh="refresh"
    ></dialogAddPraise>
    <!--回复弹窗-->
    <dialogReply
      v-if="addCommentData.isShow"
      :dialogData="addCommentData"
      @refresh="refresh"
    ></dialogReply>
  </div>
</template>

<script>
import dialogReply from '@common/dialogReply'
import dialogAddPraise from '@component/common/dialogAddPraise'
import { filterCon } from '@utils/pubFunction'
import { getBase, recommend, cRecommend } from '@/api/common/commentsAPI'
export default {
  name: 'commonDrawer',
  msg: '帖子维护-查看评论-抽屉弹窗',
  components: {
    dialogAddPraise,
    dialogReply
  },
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          isShow: false,
          topicType: '',
          id: '',
          name: '',
          from: ''
        }
      }
    }
  },
  data() {
    return {
      id: '',
      from: '',
      name: '', //点击更多，将要跳转的页面
      loading: false,
      tableData: [], // 常规位table内容
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      addPraiseData: {
        isShow: false,
        likeCount: '',
        commentId: ''
      }, //加赞弹窗
      addCommentData: {
        isShow: false,
        commentId: ''
      } //添加回复弹窗
    }
  },
  mounted() {
    this.id = this.dialogData.id
    this.from = this.dialogData.from
    this.name = this.dialogData.name
    this.reName = this.dialogData.reName
    this.searchList()
  },
  methods: {
    /* 获取列表-常规位  */
    async searchList() {
      let { topicType, id } = this.dialogData
      this.loading = true
      let obj = {
        topicType: topicType,
        topicId: id,
        pageSize: this.searchParams.pageSize,
        pageNum: this.searchParams.pageNum
      }
      let response = await getBase(obj)
      this.loading = false
      this.tableData = response.rows
      this.total = response.total
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },
    /* 取消置顶 */
    async cancelRecommend(commentId) {
      this.$confirm('确认要取消该置顶吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let isSuccess = await cRecommend(commentId)
        if (isSuccess) {
          this.refresh()
        }
      })
    },
    /* 置顶 */
    async toRecommend(commentId) {
      this.$confirm('确认要置顶该评论吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let isSuccess = await recommend(commentId)
        if (isSuccess) {
          this.refresh()
        }
      })
    },
    /* 加赞 */
    showAddPraise(commentId, likeCount) {
      this.addPraiseData.isShow = true
      this.addPraiseData.commentId = commentId
      this.addPraiseData.likeCount = likeCount
    },
    /* 刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 添加回复 */
    addComment(commentId) {
      this.addCommentData.isShow = true
      this.addCommentData.commentId = commentId
    },
    /* 关闭抽屉弹窗 */
    handleClose(done) {
      this.closeDrawer()
      done()
    },
    /* 关闭抽屉弹窗 */
    closeDrawer() {
      this.dialogData.topicType = ''
      this.dialogData.id = ''
      this.dialogData.from = ''
      this.dialogData.name = ''
      this.dialogData.isShow = false
    },
    /* 更多-跳转页面 */
    changeView() {
      let [id, name, from] = [
        this.id,
        this.name,
        this.from
        // this.$route.query.mId
      ]
      let query = {
        // mId,
        from,
        id
      }
      this.$router.push({ name, query })
      this.closeDrawer()
    }
  }
}
</script>

<style lang="less">
#commonDrawer {
  .title {
    height: 46px;
    line-height: 46px;
    span:nth-of-type(1) {
      float: left;
      color: #333;
      font-size: 14px;
      padding-left: 15px;
    }
    .el-button {
      float: right;
      margin: 10px 15px 0 0;
      span {
        color: #409eff;
      }
    }
  }
  .text-overflow {
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .el-drawer {
    &:focus {
      outline: 0;
    }
  }
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;
    }
  }
}
</style>
